<template>
    <div class="loveTalk">
        <button @click="addloveTalk">
            获取一句土味情话
        </button>
        <ul>
            <li v-for="talk in talkList" :key="talk.id">
                {{ talk.title }}
            </li>

        </ul>
    </div>
</template>

<script lang='ts' setup name='loveTalk'>
import { ref } from 'vue';
import axios from 'axios';
import { nanoid } from 'nanoid'
let talkList = ref([
    {
        id: 'dadsdsadsa1'
        , title: "今天你有点怪,哪里怪,很好看捏"
    }
    , {
        id: 'dadsdsadsa2'
        , title: "爱你捏"
    }
    , {
        id: 'dadsdsadsa3'
        , title: "永远爱你捏"
    }
])
async function addloveTalk() {
    /* 
        直接进行结构赋值....把发过来的内容内的data对象内的content属性解构出阿里
    */
    let { data: { content } } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    let obj = { id: nanoid(), title: content }
    talkList.value.unshift(obj)

}

/* 
   添加存储,我们从aixos中获取的图片
*/

</script>

<style scoped>
div.loveTalk {
    background-color: chartreuse;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}

button {
    margin: 0 5px;
    height: 30px;
}
</style>